<template>
    <div>
        <div class="input">
            <div>
                <span>课程名称：</span>
                <el-input class="shuru" v-model="courseName" placeholder="请输入内容"></el-input>
            </div>
            <div class="block">
                <el-button style="margin-left: 10px" @click="search" type="primary">搜索</el-button>
            </div>

        </div>

        <el-button type="primary" @click="openModal">添加</el-button>

        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form :model="companyData">
                <el-form-item label="公司名称" :label-width="formLabelWidth">
                    <el-input v-model="companyData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="上传公司图片" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8080/course/fileup"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                style="width: 150px ;height :150px"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </el-form-item>
                </el-form-item>
                <el-form-item label="公司地址" :label-width="formLabelWidth">
                    <el-input
                            v-model="companyData.address"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="公司电话" :label-width="formLabelWidth">
                    <el-input v-model="companyData.telephone" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="公司邮箱" :label-width="formLabelWidth">
                    <el-input v-model="companyData.email" autocomplete="off"></el-input>
                </el-form-item>



                <el-form-item>
                    <el-form-item label="上传公司二维码" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8080/course/fileup"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess1"
                                :before-upload="beforeAvatarUpload1"
                                style="width: 150px ;height :150px"
                        >
                            <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </el-form-item>
                </el-form-item>


                <el-form-item label="公司简介" :label-width="formLabelWidth">
                    <template>
                        <quill-editor
                                v-model="companyData.simplyintroduce"
                                ref="myQuillEditor"
                                :options="editorOption"
                                @blur="onEditorBlur($event)"
                                @focus="onEditorFocus($event)"
                                @change="onEditorChange($event)"
                        >
                        </quill-editor>
                    </template>
                </el-form-item>






            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAdd">确 定</el-button>
            </div>
        </el-dialog>

<!--        展示所有数据-->
        <el-table :data="courseTableData" style="width: 100%">
            <el-table-column prop="name" label="课程标题" width="120" align="center"></el-table-column>


            <el-table-column prop="picture" label="图片" width="120" align="center">
                <template slot-scope="scope">
                    <div class="img-container" @click="showImage(scope.row.picture)">
                        <img :src="scope.row.picture"/>
                    </div>
                </template>
            </el-table-column>


            <el-table-column prop="address" label="地址" width="120" align="center"></el-table-column>

            <el-table-column prop="email" label="邮箱  " width="120" align="center"></el-table-column>
            <el-table-column prop="telephone" label="电话" width="120" align="center"></el-table-column>


            <el-table-column label="简介" width="300" align="center">
                <template slot-scope="scope">
                    <div v-html="scope.row.simplyintroduce"></div> <!-- 使用 v-html 渲染富文本内容 -->
                </template>
            </el-table-column>
            <el-table-column prop="picture" label="二维码图片URL" width="120" align="center">
                <template slot-scope="scope">
                    <div class="img-container" @click="showImage2(scope.row.twopicture)">
                        <img :src="scope.row.twopicture"/>
                    </div>
                </template>
            </el-table-column>


            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="updateCourse(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改" :visible.sync="dialogFormVisible2">
            <el-form :model="companyData">
            <el-form-item label="公司名称" :label-width="formLabelWidth">
                <el-input v-model="companyData2.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-form-item label="上传公司图片" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/course/fileup"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload2"
                            style="width: 150px ;height :150px"
                    >
                        <img v-if="companyData2.picture" :src="companyData2.picture" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>
            </el-form-item>
            <el-form-item label="公司地址" :label-width="formLabelWidth">
                <el-input
                        v-model="companyData2.address"
                        autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="公司电话" :label-width="formLabelWidth">
                <el-input v-model="companyData2.telephone" autocomplete="off"></el-input>
            </el-form-item>


                <el-form-item label="公司邮箱" :label-width="formLabelWidth">
                    <el-input v-model="companyData2.email" autocomplete="off"></el-input>
                </el-form-item>



                <el-form-item>
                    <el-form-item label="上传公司二维码" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8080/course/fileup"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess22"
                                :before-upload="beforeAvatarUpload22"
                                style="width: 150px ;height :150px"
                        >
                            <img v-if="companyData2.twopicture" :src="companyData2.twopicture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </el-form-item>
                </el-form-item>

            <el-form-item label="公司简介" :label-width="formLabelWidth">
                <template>
                    <quill-editor
                            v-model="companyData2.simplyintroduce"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"
                    >

                    </quill-editor>
                </template>
            </el-form-item>





            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdate">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 模态框 -->
        <el-dialog :visible.sync="dialogVisible" width="30%">
            <img :src="currentImage" alt="大图" style="width: 100%;"/>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
  <!-- 模态框 -->
        <el-dialog :visible.sync="dialogVisible2" width="30%">
            <img :src="currentImage2" alt="大图" style="width: 100%;"/>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
      </span>
        </el-dialog>

        <!-- 视频模态框 -->
        <el-dialog :visible.sync="videoDialogVisible" width="80%">
            <video controls style="width: 100%; height: auto;">
                <source :src="currentVideo" type="video/mp4"/>
                您的浏览器不支持 HTML5 video 标签。
            </video>
            <span slot="footer" class="dialog-footer">
        <el-button @click="videoDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>

        <!--fenye-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                courseTableData: [],
                dialogFormVisible: false,//添加
                dialogFormVisible2: false,//修改
                dialogVisible: false, // 控制模态框的显示
                dialogVisible2: false, // 控制模态框的显示
                currentImage: '', // 当前显示的大图 URL
                currentImage2: '', // 当前显示的大图 URL
                videoDialogVisible: false, // 控制视频模态框的显示
                currentVideo: '', // 当前播放的视频 URL
                companyData: {
                    name:"",
                    address:"",
                    telephone:"",
                    simplyintroduce:"",
                    email:"",
                    twoPicture:"",
                    picture:"",
                },

                courseName: '',
                value1: "",  //按时间搜索
                teacher: [], //老师的信息
                courseType: [],//书籍类型
                companyData2: [],//修改
                dialogImageUrl: "",
                disabled: false,
                dialogImg: false,
                formLabelWidth: '120px',

                editorOption: {}, //编辑器配置项
                imageUrl: "", //公司图片
                imageUrl1:'',//公司二维码
                totalCount: 0, // 总记录数
                pageSize: 10, // 每页显示的记录数
                currentPage: 1, // 当前页码
                isNavigating: false, // 路由导航状态标志
            };
        },
        methods: {
            openModal() {
                this.dialogFormVisible = !this.dialogFormVisible;
            },
            //时间
            getDateString(date) {
                // let str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
                // return str;
                if (!date) {
                    return ""
                }
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            onEditorBlur() {}, // 失去焦点触发事件
            onEditorFocus() {}, // 获得焦点触发事件
            onEditorChange() {}, // 内容改变触发事件
            //搜索操作
            search() {

                if (!this.value1) {
                    this.value1 = "";
                }
                this.axios.get("/company/like", {
                    params: {
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                        name: this.courseName,

                    }
                }).then(res => {

                    this.courseTableData = res.data.data.list; // 修改为正确的字段


                    this.totalCount = res.data.data.total;
                }).catch(err => {
                    "错误"
                })
            },


            //添加操作
            handleAdd() {
                this.axios.post('/company/add', {
                    name: this.companyData.name,
                    address: this.companyData.address,
                    telephone: this.companyData.telephone,
                    simplyintroduce:this.companyData.simplyintroduce,
                    email: this.companyData.email,
                    twopicture: this.companyData.twopicture,
                    picture: this.companyData.picture,

                }).then((res) => {
                    if (res.data != null) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success',
                            duration: 2000 // 2秒后自动消失
                        });
                    } else {
                        this.$message({
                            message: '提交失败，请重试！',
                            type: 'error',
                            duration: 2000 // 2秒后自动消失
                        });
                    }
                    console.log(res)
                    this.getCourse();
                }).catch(err => {

                })
                this.dialogFormVisible = false;
            },


            // 返回图片的地址
            handleAvatarSuccess(res, file) {
                this.companyData.picture = "http://localhost:8080/course/downImg?file=" + file.response.data
            },

            beforeAvatarUpload(file) {
                this.imageUrl = URL.createObjectURL(file);
            },


             handleAvatarSuccess1(res, file) {
                this.companyData.twoPicture = "http://localhost:8080/course/downImg?file=" + file.response.data
            },

            beforeAvatarUpload1(file) {
                this.imageUrl1 = URL.createObjectURL(file);
            },


            // 修改图片
            handleAvatarSuccess2(res, file) {
                this.companyData2.picture = "http://localhost:8080/course/downImg?file=" + file.response.data
            },

            beforeAvatarUpload2(file) {
                this.imageUrl = URL.createObjectURL(file);
            },

           // 修改图片
            handleAvatarSuccess22(res, file) {
                this.companyData2.twopicture = "http://localhost:8080/course/downImg?file=" + file.response.data
            },

            beforeAvatarUpload22(file) {
                this.imageUrl1 = URL.createObjectURL(file);
            },



            //删除操作
            handleDelete(index) {
                console.log("index:" + index)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete(`/company/delete?id=${index}`).then(response => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getCourse();
                    }).catch(error => {
                        this.$message.error('删除失败，请重试'); // 处理删除失败的情况
                        console.error('删除失败', error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },

            //修改数据回显
            updateCourse(data) {
                this.dialogFormVisible2 = true;
                console.log(data)
                this.companyData2 = data;
                // console.log(this.courseFormData2)

            },

            //修改操作
            handleUpdate() {
                this.axios.put('company/update', null, {
                    params: {
                        id:this.companyData2.id,
                        name: this.companyData2.name,
                        address: this.companyData2.address,
                        telephone: this.companyData2.telephone,
                        simplyintroduce:this.companyData2.simplyintroduce,
                        email: this.companyData2.email,
                        twopicture: this.companyData2.twopicture,
                        picture: this.companyData2.picture,
                    }
                }).then((res) => {
                    if (res.data != null) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success',
                            duration: 2000 // 2秒后自动消失
                        });
                    } else {
                        this.$message({
                            message: '提交失败，请重试！',
                            type: 'error',
                            duration: 2000 // 2秒后自动消失
                        });
                    }
                    console.log(res)
                    this.getCourse();
                }).catch(err => {
                })
                this.dialogFormVisible2 = false;
            },


            //切换每页的条数
            handleSizeChange(size) {
                this.pageSize = size;
                // 可以在这里重新获取数据
                this.search();
            },
            //切换页数
            handleCurrentChange(page) {
                this.currentPage = page;
                this.search();
            },

            //点击图片,显示大图效果
            showImage(imageUrl) {
                console.log("Image clicked:", imageUrl);
                this.currentImage = imageUrl; // 设置当前图片 URL
                this.dialogVisible = true; // 打开模态框
            },
            showImage2(imageUrl) {
                console.log("Image clicked:", imageUrl);
                this.currentImage2 = imageUrl; // 设置当前图片 URL
                this.dialogVisible2 = true; // 打开模态框
            },
            //点击视频,进行播放
            openVideoDialog(videoUrl) {
                this.currentVideo = videoUrl; // 设置当前视频 URL
                this.videoDialogVisible = true; // 打开视频模态框
            },
            getCourse() {
                this.axios.get(`/company/all?pageNo=${this.currentPage}&pageSize=${this.pageSize}`).then((res) => {
                    console.log(res)
                    this.courseTableData = res.data.data.list; // 修改为正确的字段

                    this.totalCount = res.data.data.total;
                    console.log(this.courseTableData);
                    // console.log(this.totalCount);
                }).catch(err => {
                    console.log("错误");
                });
            },

        },
        created() {
            this.getCourse();

        },
    }
</script>

<style scoped>
    .img-container {
        width: 70px;
        height: 70px;
        position: relative;
        border-radius: 20%;
    }

    .img-container > img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: cover;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20%;
    }

    .play-icon {
        font-size: 30px;
        line-height: 70px;
        margin: 0 auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .img-container {
        width: 100px; /* 固定宽度 */
        height: 100px; /* 固定高度 */
        position: relative;
        border-radius: 20%;
        overflow: hidden; /* 确保超出部分被隐藏 */
        cursor: pointer; /* 鼠标悬停时显示为手型 */
    }

    .img-container > img {
        width: 100%; /* 使图片宽度适应容器 */
        height: 100%; /* 使图片高度适应容器 */
        object-fit: cover; /* 保持图片比例并填充容器 */
    }

    .shuru {
        width: 200px;
        height: 36px;
        padding: 0 15px;

    }

    .input {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

</style>